<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    原生JS TitleTip |
    
    无敌小笼包</title>
  
    <link rel="shortcut icon" href="/favicon.png">
  
  <link rel="stylesheet" href="/css/style.css">
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
  
  <script src="/js/pace.min.js"></script>
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-JSTip" class="article article-type-post" itemscope itemprop="blogPost">

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      原生JS TitleTip
    </h1>
  

      </header>
    

    
      <div class="article-meta">
        <a href="/2016/01/19/JSTip/" class="article-date">
  <time datetime="2016-01-19T05:58:41.000Z" itemprop="datePublished">2016-01-19</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML/">HTML</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      
      
      
        <p>　　<strong> 自用笔记：</strong>本文属于自用笔记，不做详解，仅供参考。在此记录自己已理解并开始遵循的前端代码规范。What How Why<br><a id="more"></a></p>
<h2 id="原生JS-TitleTip"><a href="#原生JS-TitleTip" class="headerlink" title="原生JS TitleTip"></a>原生JS TitleTip</h2><p>为了实现对特定的A标签Title的美化，使其可以按照我们想要的样式显示。</p>
<p>方案一：</p>
<p><a href="/Native-JS/TitleTip">Demo</a></p>
<p><iframe width="100%" src="/Native-JS/TitleTip"></iframe><br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&lt;a href=&quot;#&quot; class=&quot;TitleTip&quot; title=&quot;BI Scp&quot; &gt;A标签TitleTip&lt;/a&gt;</div></pre></td></tr></table></figure></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div></pre></td><td class="code"><pre><div class="line">&lt;script type=&quot;text/javascript&quot;&gt;</div><div class="line">	var Common = &#123;</div><div class="line">		getItself: function(id) &#123;</div><div class="line">			return &quot;string&quot; == typeof id ? document.getElementById(id) : id;</div><div class="line">		&#125;,</div><div class="line">		getTextSize: function(text) &#123;</div><div class="line">			var span = document.createElement(&quot;span&quot;);</div><div class="line">			var result = &#123;&#125;;</div><div class="line">			result.width = span.offsetWidth;</div><div class="line">			result.height = span.offsetWidth;</div><div class="line">			span.style.visibility = &quot;hidden&quot;;</div><div class="line">			document.body.appendChild(span);</div><div class="line">			if (typeof span.textContent != &quot;undefined&quot;) span.textContent = text;</div><div class="line">			else span.innerText = text;</div><div class="line">			result.width = span.offsetWidth - result.width;</div><div class="line">			result.height = span.offsetHeight - result.height;</div><div class="line">			span.parentNode.removeChild(span);</div><div class="line">			return result;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	var TitleTip = &#123;</div><div class="line">		showTitleTip: function(param, linkObj, e) &#123;</div><div class="line">			var div;</div><div class="line">			if (document.getElementById(&quot;TitleTipDiv&quot;)) &#123;</div><div class="line">				document.body.removeChild(document.getElementById(&quot;TitleTipDiv&quot;));</div><div class="line">			&#125;</div><div class="line">			div = document.createElement(&quot;div&quot;);</div><div class="line">			div.id = &quot;TitleTipDiv&quot;;</div><div class="line">			// div.style.cssText = &quot;text-align: center; color: #fff; background: rgba(0,0,0,.8); position: absolute; z-index: 100; padding: 5px 15px; font-size: 12px; line-height: 20px; transform: translate(-50%); border-radius: 6px;&quot;;</div><div class="line">			div.innerHTML = linkObj.tip;</div><div class="line">			document.body.appendChild(div);</div><div class="line"></div><div class="line">			if (param &amp;&amp; param.width) &#123; //如未设置，默认一行显示</div><div class="line">				if (Common.getTextSize(div.innerHTML).width &lt; param.width) &#123;</div><div class="line">					div.style.maxWidth = param.width + &quot;px&quot;;</div><div class="line">				&#125; else &#123;</div><div class="line">					div.style.width = param.width + &quot;px&quot;;</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line"></div><div class="line">			//must before set opr to get offsetHeight...</div><div class="line">			div.style.display = &quot;&quot;; </div><div class="line"></div><div class="line">			///set TitleTip position</div><div class="line">			// console.log(&quot;a W&quot;+linkObj.offsetWidth);</div><div class="line">			// console.log(&quot;a H&quot;+linkObj.offsetHeight);</div><div class="line">			// console.log(&quot;a X&quot;+linkObj.offsetTop);</div><div class="line">			// console.log(&quot;a Y&quot;+linkObj.offsetLeft);</div><div class="line">			// console.log(&quot;Tip W&quot;+div.offsetWidth);</div><div class="line">			// console.log(&quot;Tip H&quot;+div.offsetHeight);</div><div class="line"></div><div class="line">			div.style.top = linkObj.offsetTop + linkObj.offsetHeight + 8 + &quot;px&quot;;</div><div class="line">			div.style.left = linkObj.offsetLeft + linkObj.offsetWidth/2 + &quot;px&quot;;</div><div class="line"></div><div class="line">			///hide TitleTip after some time</div><div class="line">			if (param &amp;&amp; param.time) &#123;</div><div class="line">				setTimeout(this.hidTitleTip, param.time);</div><div class="line">			&#125;</div><div class="line">		&#125;,</div><div class="line">		hidTitleTip: function() &#123;</div><div class="line">			if (document.getElementById(&quot;TitleTipDiv&quot;)) &#123;</div><div class="line">				document.getElementById(&quot;TitleTipDiv&quot;).style.display = &quot;none&quot;;</div><div class="line">			&#125;</div><div class="line">		&#125;,</div><div class="line">		addTips: function(param) &#123;</div><div class="line">			var linkArr = document.getElementsByTagName(&quot;a&quot;);</div><div class="line">			if (!linkArr) &#123;</div><div class="line">				return false;</div><div class="line">			&#125;</div><div class="line">			for (i = 0; i &lt; linkArr.length; i++) &#123;</div><div class="line">				if (linkArr[i].className == &quot;TitleTip&quot;) &#123;</div><div class="line">					linkArr[i].tip = linkArr[i].title;</div><div class="line">					var tipObj = this;</div><div class="line">					linkArr[i].onmouseover = function(e) &#123;</div><div class="line">						tipObj.showTitleTip(param, this, e);</div><div class="line">					&#125;</div><div class="line">					linkArr[i].onmouseout = tipObj.hidTitleTip;</div><div class="line">					if (param &amp;&amp; param.moveable == true) &#123; //默认不滚动</div><div class="line">						linkArr[i].onmousemove = function(e) &#123;</div><div class="line">							tipObj.showTitleTip(param, this, e);</div><div class="line">						&#125;</div><div class="line">					&#125;</div><div class="line">					linkArr[i].title = &quot;&quot;;</div><div class="line">				&#125;</div><div class="line">			&#125;</div><div class="line">		&#125;</div><div class="line">	&#125;</div><div class="line">	window.onload = function() &#123;</div><div class="line">		TitleTip.addTips(&#123;</div><div class="line">			width: 200</div><div class="line">		&#125;); </div><div class="line">		// time:5000, moveable: true </div><div class="line">	&#125;</div><div class="line">&lt;/script&gt;</div></pre></td></tr></table></figure>
<p><a href=""></a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://blog.mango16.cc/2016/01/19/JSTip/" data-id="cjrbtw1xk00066d8h1ygwq6xu"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/2016/01/19/AjaxStatus/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            Ajax Status请求状态
          
        </div>
      </a>
    
    
      <a href="/2015/12/21/Sublimebest/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">Sublime Text历练</div>
      </a>
    
  </nav>


  

  
    
  <div class="gitalk" id="gitalk-container"></div>
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <script type="text/javascript">
      var gitalk = new Gitalk({
        clientID: 'caba8826a61790936307',
        clientSecret: '09a15037dcab30d9adf35a53ec6961939169f797',
        repo: 'm9rco.github.io',
        owner: 'm9rco',
        admin: ['m9rco'],
        // id: location.pathname,      // Ensure uniqueness and length less than 50
        id: md5(location.pathname),
        distractionFreeMode: false  // Facebook-like distraction free mode
      })

  gitalk.render('gitalk-container')
  </script>

  

</article>



</section>
  <footer class="footer">
  
  <div class="outer">
    <ul class="list-inline">
      <li>&copy; 2019 无敌小笼包</li>
      <i class="pulse"></i>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>

<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img src="/images/hexo.svg" alt="无敌小笼包"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/archives">归档</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/nagging">叽咕</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="Search">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>

<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>
  <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/lazyload.min.js"></script>


  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/search.js"></script>


<script src="/js/ocean.js"></script>

</body>
</html>